<template>
    <el-form :model="triggerForm" :rules="triggerRules" ref="triggerForm" label-width="180px" size="mini">
        <el-form-item label="自定义事件名称" prop="name">
            <el-input v-model="triggerForm.name" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="触发表单" prop="type">
            <el-select v-model="triggerForm.type" disabled>
                <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="state">
            <el-radio-group v-model="triggerForm.state">
                <el-radio :label="0">启用</el-radio>
                <el-radio :label="1">停用</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="触发事件类型" prop="customType">
            <el-select v-model="triggerForm.customType" disabled>
                <el-option v-for="item in customTypeOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="触发事件动作" prop="customDataType">
            <el-select v-model="triggerForm.customDataType" filterable>
                <el-option v-for="item in customDataTypeOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="触发事件条件" prop="dataCondition">
            <el-input type="textarea" v-model="triggerForm.dataCondition" placeholder="默认为全部" :autosize="{ minRows: 4}">
            </el-input>
        </el-form-item>
    </el-form>
</template>

<script>
    export default {
        data() {
            return {
                triggerForm: {
                    name: '',
                    type: 2,
                    state: 0,
                    customType: 0,
                    customDataType: 0,
                    dataCondition: ''
                },
                triggerRules: {
                    name: [{
                        required: true,
                        message: '自定义事件名称不能为空!',
                        trigger: 'blur'
                    }],
                    type: [{
                        required: true,
                    }],
                    state: [{
                        required: true,
                    }],
                    customType: [{
                        required: true,
                    }],
                    customDataType: [{
                        required: true,
                    }],
                },
                typeOptions: [{
                    value: 2,
                    label: '报工'
                }],
                customTypeOptions: [{
                    value: 0,
                    label: '数据变更'
                },{
                    value: 1,
                    label: '定时触发'
                }],
                customDataTypeOptions: [{
                    value: 0,
                    label: '新增数据'
                }, {
                    value: 1,
                    label: '编辑数据'
                },{
                    value: 2,
                    label: '删除数据'
                }],
            }
        },
        methods: {
            receiveProp(row){
                const {name,state,customType,customDataType,dataCondition} = row
                this.triggerForm.name = name
                this.triggerForm.state = state
                this.triggerForm.customType = customType
                this.triggerForm.customDataType = customDataType
                this.triggerForm.dataCondition = dataCondition
            },
            inspectForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$emit('getActive', 1)
                    } else {
                        return false;
                    }
                });
            },
            getFiringRuleInfo(){
                return this.triggerForm
            },
            resetForm() {
                this.$refs.triggerForm.resetFields()
            }
        }
    }
</script>

<style lang="less" scoped>
    /deep/ .el-select{
        width: 80%;
    }

    .el-input,.el-textarea{
        width: 80%;
    }

    .el-form-item--mini.el-form-item:last-child{
        margin-bottom: 20px;
    }
</style>